<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/vue.js"></script>
</head>
<body>

<div id="blog-post-demo">
    <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
    ></blog-post>
</div>

</body>
<script type="text/javascript">
    Vue.component('blog-post', {
        props: ['post'],
        template: `
          <div class="blog-post">
          <h3>{{ post.title }}</h3>
          <div v-html="post.content"></div>
          </div>
        `
    })
    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                {id: 1, title: 'My journey with Vue'},
                {id: 2, title: 'Blogging with Vue'},
                {id: 3, title: 'Why Vue is so fun'}
            ],
        }
    })
</script>
</html>